<template>
	<view class="favorites-page">
		<!-- 自定义导航栏 -->
		<u-navbar :is-back="true" title="我收藏的店" :background="{ backgroundColor: '#ffffff' }">
		</u-navbar>

		<!-- 列表 -->
		<scroll-view scroll-y class="list-scroll-area">
			<view class="shop-list" v-if="!loading && favoriteList.length > 0">
				<view class="shop-item" v-for="(item, index) in favoriteList" :key="item.id">
					<view class="shop-content" @click="goToShopDetail(item.agent_id)">
						<image class="shop-image" :src="item.image" mode="aspectFill"></image>
						<view class="shop-info">
							<view class="shop-name">{{ item.agent_title }}</view>
						</view>
					</view>
					<view class="action-button">
						<u-button type="warning" size="mini" shape="circle" @click="handleCancelFavorite(item, index)">取消收藏</u-button>
					</view>
				</view>
			</view>

			<!-- 加载状态 -->
			<u-loading-page :loading="loading"></u-loading-page>

			<!-- 空状态 -->
			<u-empty v-if="!loading && favoriteList.length === 0" mode="list" text="什么内容都没有哦"></u-empty>
		</scroll-view>

		<!-- 确认弹窗 (can be removed if no longer needed, or kept for other purposes) -->
		<u-modal v-model="showModal" :show-cancel-button="true" @confirm="confirmAction" :title="modalInfo.title"
			:content="modalInfo.content"></u-modal>
	</view>
</template>

<script>
import request from '@/common/request.js';

export default {
	data() {
		return {
			page: 1,
			loading: true,
			favoriteList: [],
			showModal: false,
			modalInfo: {
				title: '',
				content: '',
				action: null,
				payload: null
			}
		};
	},
	onLoad() {
		this.fetchFavorites();
	},
	methods: {
		async fetchFavorites() {
			this.loading = true;
			try {
				const res = await request.httpTokenRequest({
					url: '/api/user/getCollect?page=' + this.page,
					method: 'GET'
				});

				if (res.data.code === 1) {
					const site_url = this.$store.state.config.site_url;
					this.favoriteList = res.data.data.data.map(item => ({
						...item,
						image: site_url + item.image
					}));
				} else {
					this.$u.toast(res.data.msg || '获取收藏列表失败');
				}
			} catch (error) {
				console.log(error);
				this.$u.toast('网络请求失败');
			} finally {
				this.loading = false;
			}
		},
		goToShopDetail(shopId) {
			uni.navigateTo({
				url: `/pages/shop/shop-detail?id=${shopId}`
			});
		},
		handleCancelFavorite(item, index) {
			this.modalInfo = {
				title: '提示',
				content: `确定要取消收藏 "${item.agent_title}" 吗？`,
				action: 'cancelOne',
				payload: {
					agent_id: item.agent_id,
					index: index
				}
			};
			this.showModal = true;
		},
		async confirmAction() {
			if (this.modalInfo.action === 'cancelOne') {
				const {
					agent_id,
					index
				} = this.modalInfo.payload;
				try {
					const res = await request.httpTokenRequest({
						url: '/api/user/delCollect?agent_id='+ agent_id,
						method: 'GET',
						data: {
							agent_id: agent_id
						}
					});
					if (res.data.code === 1) {
						this.$u.toast('取消收藏成功');
						this.favoriteList.splice(index, 1);
					} else {
						this.$u.toast(res.data.msg || '操作失败');
					}
				} catch (error) {
					this.$u.toast('网络请求失败');
				}
			}
		}
	}
};
</script>

<style lang="scss">
.favorites-page {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background-color: #f5f6fa;
}

.list-scroll-area {
	flex: 1;
	height: 0; // This is important for flexbox scrolling
}

.shop-list {
	padding: 24rpx;

	.shop-item {
		display: flex;
		align-items: center;
		justify-content: space-between; // To push button to the right
		background-color: #fff;
		padding: 20rpx;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

		.shop-content {
			display: flex;
			align-items: center;
			flex: 1;
			min-width: 0;
		}

		.shop-image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 8rpx;
			margin-right: 20rpx;
			flex-shrink: 0;
		}

		.shop-info {
			flex: 1;
			min-width: 0; // For text overflow
		}

		.shop-name {
			font-size: 30rpx;
			font-weight: bold;
			color: #333;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.action-button {
			margin-left: 20rpx; // Add some space between info and button
			flex-shrink: 0;
		}
	}
}
</style>